<template>
  <div class="editor-cell">
    <div class="editor-cell-title" :class="{'editor-cell-title-require':isRequired}">{{editor_cell_name}}</div>
    <slot name="default"></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'EditorCell',
  props: {
    editor_cell_name:{
      default: '选项名称',
      type: String
    },
    isRequired: {
      default: false,
      type: Boolean
    }
  }
});
</script>

<style scoped lang="scss">
.editor-cell{
  color: rgba(0,0,0,0.85);
  font-size: 14px;
  margin-bottom: 20px;
  .editor-cell-title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
    &-require{
      &::before{
        width: 5px;
        height: 15px;
        font-size: 15px;
        line-height: 22px;
        content: '*';
        color: #ff0000;
        margin-right: 5px;
      }
    }
  }
}
</style>
